<template>
  <div class="interface-management">
    <!-- 动态背景 -->
    <div class="animated-bg">
      <div class="light-beam"></div>
      <div class="particles"></div>
      <div class="cyber-grid"></div>
    </div>

    <!-- 头部区域 -->
    <header class="page-header">
      <h1 class="title">
        <span class="icon"><i class="fas fa-code"></i></span>
        新增接口
      </h1>
      <p class="subtitle">创建高质量的API接口，为开发者提供优质服务</p>
    </header>

    <!-- 主要内容区 -->
    <div class="content-wrapper">
      <!-- 步骤导航 -->
      <div class="steps-nav">
        <div class="progress-bar">
          <div class="progress" :style="{ width: progressWidth + '%' }"></div>
        </div>
        <div 
          v-for="(step, index) in steps" 
          :key="index"
          :class="['step', { 
            'active': currentStep === index,
            'completed': currentStep > index 
          }]"
          @click="jumpToStep(index)"
        >
          <div class="step-icon">
            <i :class="step.icon"></i>
          </div>
          <div class="step-content">
            <div class="step-title">{{ step.title }}</div>
            <div class="step-desc">{{ step.description }}</div>
          </div>
        </div>
      </div>

      <!-- 表单内容 -->
      <div class="form-container">
        <transition name="fade-slide" mode="out-in">
          <!-- 步骤1: 基本信息 -->
          <div v-if="currentStep === 0" key="basic" class="form-step">
            <div class="form-group">
              <label>接口名称 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiTitle"
                  ref="apiTitle"
                  placeholder="请输入接口名称"
                  :maxlength="20"
                  show-word-limit
                  @input="handleInput('apiTitle')"
                >
                  <template #prefix>
                    <i class="fas fa-tag"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.apiTitle" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiTitle }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口别名 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiAlias"
                  ref="apiAlias"
                  placeholder="请输入接口别名"
                  :maxlength="15"
                  show-word-limit
                  @input="handleInput('apiAlias')"
                >
                  <template #prefix>
                    <i class="fas fa-signature"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.apiAlias" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiAlias }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口描述 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input
                  ref="apiDescription"
                  type="textarea"
                  v-model="formData.apiDescription"
                  :rows="4"
                  placeholder="详细描述接口的功能和用途"
                  :maxlength="200"
                  show-word-limit
                  @input="handleInput('apiDescription')"
                ></el-input>
                <div v-if="validationErrors.apiDescription" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiDescription }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口作者</label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiAuthor"
                  placeholder="原创接口可不填"
                >
                  <template #prefix>
                    <i class="fas fa-user"></i>
                  </template>
                </el-input>
              </div>
            </div>

            <div class="form-group">
              <label>接口分类 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-select 
                  v-model="formData.apiCategory"
                  ref="apiCategory"
                  placeholder="请选择接口分类"
                  class="full-width"
                  @change="handleInput('apiCategory')"
                >
                  <el-option
                    v-for="category in categories"
                    :key="category.value"
                    :label="category.label"
                    :value="category.value"
                  >
                    <i :class="category.icon"></i>
                    <span>{{ category.label }}</span>
                  </el-option>
                </el-select>
                <div v-if="validationErrors.apiCategory" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiCategory }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>接口图片</label>
              <div class="upload-section">
                <div class="upload-type-switch">
                  <button 
                    :class="['switch-btn', { active: imageUploadType === 'upload' }]"
                    @click="imageUploadType = 'upload'"
                  >
                    <i class="fas fa-upload"></i>
                    本地上传
                  </button>
                  <button 
                    :class="['switch-btn', { active: imageUploadType === 'link' }]"
                    @click="imageUploadType = 'link'"
                  >
                    <i class="fas fa-link"></i>
                    图片链接
                  </button>
                </div>

                <!-- <div v-if="imageUploadType === 'upload'" class="upload-area">
                  <el-upload
                    class="uploader"
                    drag
                    action="/api/upload"
                    :show-file-list="false"
                    :on-success="handleUploadSuccess"
                    :before-upload="beforeUpload"
                  >
                    <i class="fas fa-cloud-upload-alt"></i>
                    <div class="upload-text">
                      <p>点击或拖拽文件到此处上传</p>
                      <p class="upload-tip">支持 jpg、png、gif 格式，大小不超过 5MB</p>
                    </div>
                  </el-upload>
                </div> -->

                <div class="link-input">
                  <el-input 
                    v-model="formData.imageLink"
                    placeholder="请输入图片链接"
                  >
                    <template #prefix>
                      <i class="fas fa-link"></i>
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤2: 调用信息 -->
          <div v-if="currentStep === 1" key="call" class="form-step">
            <div class="form-group">
              <label>接口地址 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.apiUrl"
                  ref="apiUrl"
                  placeholder="请输入接口完整地址"
                  @input="handleInput('apiUrl')"
                >
                  <template #prefix>
                    <i class="fas fa-link"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.apiUrl" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.apiUrl }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>请求示例 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input 
                  v-model="formData.requestExample"
                  ref="requestExample"
                  placeholder="请输入请求示例"
                  @input="handleInput('requestExample')"
                >
                  <template #prefix>
                    <i class="fas fa-code"></i>
                  </template>
                </el-input>
                <div v-if="validationErrors.requestExample" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.requestExample }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>请求方法 <span class="required">*</span></label>
              <div class="method-selector">
                <button
                  v-for="method in ['GET', 'POST', 'PUT', 'DELETE']"
                  :key="method"
                  :class="['method-btn', { active: formData.requestMethod === method }]"
                  @click="formData.requestMethod = method"
                >
                  {{ method }}
                </button>
              </div>
            </div>

            <div class="form-group">
              <label>响应格式 <span class="required">*</span></label>
              <div class="format-selector">
                <button
                  v-for="format in responseFormats"
                  :key="format.value"
                  :class="['format-btn', { active: formData.responseFormat === format.value }]"
                  @click="formData.responseFormat = format.value"
                >
                  <i :class="format.icon"></i>
                  {{ format.label }}
                </button>
              </div>
            </div>

            <div class="form-group">
              <label>响应示例 <span class="required">*</span></label>
              <div class="input-wrapper">
                <el-input
                  ref="responseExample"
                  type="textarea"
                  v-model="formData.responseExample"
                  :rows="6"
                  placeholder="请输入JSON格式的响应示例"
                  @input="handleInput('responseExample')"
                ></el-input>
                <div v-if="validationErrors.responseExample" class="error-message">
                  <i class="fas fa-exclamation-circle"></i>
                  {{ validationErrors.responseExample }}
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤3: 确认提交 -->
          <div v-if="currentStep === 2" key="submit" class="form-step">
            <div class="preview-section">
              <h3>接口预览</h3>
              <div class="preview-card">
                <div class="preview-header">
                  <h4>{{ formData.apiTitle }}</h4>
                  <span class="preview-alias">{{ formData.apiAlias }}</span>
                </div>
                <div class="preview-body">
                  <div class="preview-item">
                    <label>接口描述</label>
                    <p>{{ formData.apiDescription }}</p>
                  </div>
                  <div class="preview-item">
                    <label>请求地址</label>
                    <div class="code-block">
                      {{ formData.apiUrl }}
                      <button @click="copyText(formData.apiUrl)" class="copy-btn">
                        <i class="fas fa-copy"></i>
                      </button>
                    </div>
                  </div>
                  <div class="preview-item">
                    <label>请求方法</label>
                    <span :class="['method-tag', formData.requestMethod.toLowerCase()]">
                      {{ formData.requestMethod }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="submit-section">
              <div class="submit-notice">
                <i class="fas fa-exclamation-circle"></i>
                <p>提交前请确认以下内容：</p>
                <ul>
                  <li>接口信息准确完整</li>
                  <li>响应示例格式正确</li>
                  <li>接口可以正常访问</li>
                </ul>
              </div>
              
              <el-checkbox v-model="agreement">
                我已确认以上内容，并同意<a href="#" @click.prevent="showTerms">服务条款</a>
              </el-checkbox>
            </div>
          </div>
        </transition>
      </div>

      <!-- 表单控制按钮 -->
      <div class="form-controls">
        <button 
          v-if="currentStep > 0"
          @click="prevStep"
          class="btn-secondary"
        >
          <i class="fas fa-arrow-left"></i>
          上一步
        </button>
        
        <button 
          v-if="currentStep < steps.length - 1"
          @click="nextStep"
          class="btn-primary"
        >
          下一步
          <i class="fas fa-arrow-right"></i>
        </button>
        
        <button 
          v-else
          @click="submitForm"
          :disabled="!agreement || isSubmitting"
          class="btn-submit"
        >
          <i :class="isSubmitting ? 'fas fa-spinner fa-spin' : 'fas fa-paper-plane'"></i>
          {{ isSubmitting ? '提交中...' : '提交接口' }}
        </button>
      </div>
    </div>

    <!-- 全局提示 -->
    <div class="toast" :class="{ 'show': showToast }">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'InterfaceManagement',
  data() {
    return {
      currentStep: 0,
      showTip: '',
      imageUploadType: 'upload',
      isSubmitting: false,
      agreement: false,
      showSuccessDialog: false,
      steps: [
        { 
          title: '基本信息',
          description: '填写接口的基本信息',
          icon: 'fas fa-info-circle'
        },
        {
          title: '调用信息',
          description: '设置接口的调用方式',
          icon: 'fas fa-code'
        },
        {
          title: '确认提交',
          description: '预览并提交接口',
          icon: 'fas fa-check-circle'
        }
      ],
      formData: {
        apiTitle: '',
        apiAlias: '',
        apiDescription: '',
        apiAuthor: '',
        apiCategory: '',
        apiUrl: '',
        requestExample: '',
        requestMethod: '',
        responseFormat: '',
        responseExample: '',
        imageLink: ''
      },
      categories: [
        { value: 'web', label: 'Web开发', icon: 'fas fa-globe' },
        { value: 'mobile', label: '移动应用', icon: 'fas fa-mobile-alt' },
        { value: 'ai', label: '人工智能', icon: 'fas fa-brain' },
        { value: 'data', label: '数据处理', icon: 'fas fa-database' },
        { value: 'security', label: '安全防护', icon: 'fas fa-shield-alt' }
      ],
      responseFormats: [
        { value: 'JSON', label: 'JSON', icon: 'fas fa-code' },
        { value: 'XML', label: 'XML', icon: 'fas fa-file-code' },
        { value: 'TEXT', label: 'TEXT', icon: 'fas fa-file-alt' }
      ],
      // 表单验证规则
      formRules: {
        apiTitle: [
          { required: true, message: '请输入接口名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        apiAlias: [
          { required: true, message: '请输入接口别名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_-]+$/, message: '只能包含字母、数字、下划线和横线', trigger: 'blur' }
        ],
        apiDescription: [
          { required: true, message: '请输入接口描述', trigger: 'blur' },
          { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
        ],
        apiCategory: [
          { required: true, message: '请选择接口分类', trigger: 'change' }
        ],
        apiUrl: [
          { required: true, message: '请输入接口地址', trigger: 'blur' },
          { pattern: /^https?:\/\//, message: '请输入有效的URL地址', trigger: 'blur' }
        ],
        responseExample: [
          { required: true, message: '请输入响应示例', trigger: 'blur' },
          { validator: this.validateJSON, trigger: 'blur' }
        ]
      },
      validationErrors: {}
    }
  },
  computed: {
    progressWidth() {
      return (this.currentStep / (this.steps.length - 1)) * 100
    }
  },
  methods: {
    nextStep() {
      if (this.validateCurrentStep()) {
        this.currentStep++
      }
    },
    prevStep() {
      this.currentStep--
    },
    validateCurrentStep() {
      this.clearErrors(); // 清除之前的错误
      let valid = true;
      
      if (this.currentStep === 0) {
        // 基本信息验证
        if (!this.formData.apiTitle) {
          this.showError('apiTitle', '请输入接口名称');
          valid = false;
        } else if (this.formData.apiTitle.length > 20) {
          this.showError('apiTitle', '接口名称不能超过20个字符');
          valid = false;
        }

        if (!this.formData.apiAlias) {
          this.showError('apiAlias', '请输入接口别名');
          valid = false;
        } else if (!/^[a-zA-Z0-9_-]+$/.test(this.formData.apiAlias)) {
          this.showError('apiAlias', '接口别名只能包含字母、数字、下划线和横线');
          valid = false;
        }

        if (!this.formData.apiDescription) {
          this.showError('apiDescription', '请输入接口描述');
          valid = false;
        }

        if (!this.formData.apiCategory) {
          this.showError('apiCategory', '请选择接口分类');
          valid = false;
        }
      }

      if (this.currentStep === 1) {
        // 调用信息验证
        if (!this.formData.apiUrl) {
          this.showError('apiUrl', '请输入接口地址');
          valid = false;
        } else if (!/^https?:\/\//.test(this.formData.apiUrl)) {
          this.showError('apiUrl', '请输入有效的URL地址');
          valid = false;
        }

        if (!this.formData.requestExample) {
          this.showError('requestExample', '请输入请求示例');
          valid = false;
        }

        if (!this.formData.requestMethod) {
          this.showError('requestMethod', '请选择请求方法');
          valid = false;
        }

        if (!this.formData.responseFormat) {
          this.showError('responseFormat', '请选择响应格式');
          valid = false;
        }

        if (!this.formData.responseExample) {
          this.showError('responseExample', '请输入响应示例');
          valid = false;
        } else {
          try {
            JSON.parse(this.formData.responseExample);
          } catch (e) {
            this.showError('responseExample', '响应示例格式不正确，请输入有效的JSON格式');
            valid = false;
          }
        }
      }

      return valid;
    },
    // JSON格式验证
    validateJSON(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入响应示例'))
        return
      }

      try {
        JSON.parse(value)
        callback()
      } catch (e) {
        callback(new Error('请输入有效的JSON格式'))
      }
    },
    //向接口/api/system/api/findAllCatelogies请求接口分类列表GET请求
    async fetchCategories() {
      const response = await axios.get('/api/system/api/findAllCatelogies')
      this.categories = response.data.data;
      //过滤数据，将id变为valvue,categoryName变为label用来适应下拉框数据结构
      this.categories = this.categories.map(item => ({
        value: item.id,
        label: item.categoryName
      }))
    },
    // 提交表单
    async submitForm() {
      if (!this.validateCurrentStep()) return
      
      this.isSubmitting = true
      try {
        const formData = new FormData()
        for (const key in this.formData) {
          formData.append(key, this.formData[key])
        }

        const response = await axios.post('/api/system/api/submit', this.formData, {
          headers: {
        'Content-Type': 'application/json'
      }
        })

        if (response.data.code === 200) {
          this.$message.success('提交成功')
          this.showSuccessDialog = true
        } else {
          throw new Error(response.data.message || '提交失败')
        }
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.isSubmitting = false
      }
    },
    // 图片上传
    
    // 文件上传前验证
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB!')
        return false
      }
      return true
    },
    validateJson() {
      try {
        JSON.parse(this.formData.responseExample)
        this.showToastMessage('JSON格式正确')
      } catch (e) {
        this.showToastMessage('JSON格式错误')
      }
    },
    formatJson() {
      try {
        const formatted = JSON.stringify(JSON.parse(this.formData.responseExample), null, 2)
        this.formData.responseExample = formatted
      } catch (e) {
        this.showToastMessage('JSON格式错误，无法格式化')
      }
    },
    showToastMessage(message) {
      this.toastMessage = message
      this.showToast = true
      setTimeout(() => {
        this.showToast = false
      }, 3000)
    },
    copyText(text) {
      navigator.clipboard.writeText(text).then(() => {
        this.showToastMessage('复制成功')
      })
    },
    handleUploadSuccess(res) {
      this.formData.imageLink = res.url
      this.showToastMessage('上传成功')
    },
    // 显示错误
    showError(field, message) {
      // 添加错误信息
      this.$set(this.validationErrors, field, message);
      
      // 添加抖动动画
      const element = this.$refs[field]?.$el || this.$refs[field];
      if (element) {
        element.classList.add('error-shake');
        element.classList.add('input-error');
        
        // 动画结束后移除类名
        setTimeout(() => {
          element.classList.remove('error-shake');
        }, 600);
      }

      // 显示错误提示
      this.showToastMessage(message);
    },

    // 清除错误
    clearErrors() {
      this.validationErrors = {};
      // 移除所有错误相关的类
      document.querySelectorAll('.input-error').forEach(el => {
        el.classList.remove('input-error');
      });
    },

    // 处理输入变化
    handleInput(field) {
      // 当用户开始输入时，清除该字段的错误
      if (this.validationErrors[field]) {
        this.$delete(this.validationErrors, field);
        const element = this.$refs[field]?.$el || this.$refs[field];
        if (element) {
          element.classList.remove('input-error');
        }
      }
    }
  },
  mounted() {
    this.fetchCategories()
  }
}
</script>

<style scoped>
/* 基础样式 */
.interface-management {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* 动态背景 */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.light-beam {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: linear-gradient(
    45deg,
    rgba(66, 133, 244, 0.1) 0%,
    rgba(66, 133, 244, 0.05) 100%
  );
  animation: rotate 20s linear infinite;
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at center, #4285f4 1px, transparent 1px);
  background-size: 50px 50px;
  animation: float 20s linear infinite;
}

.cyber-grid {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(rgba(66, 133, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 133, 244, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: grid-move 20s linear infinite;
}

/* 头部样式 */
.page-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.title {
  font-size: 2.5rem;
  color: #1a237e;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.icon {
  width: 50px;
  height: 50px;
  background: rgba(26, 35, 126, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #1a237e;
}

.subtitle {
  font-size: 1.1rem;
  color: #666;
}

/* 内容包装器 */
.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 步骤导航 */
.steps-nav {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: #eee;
  width: 100%;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #1a237e, #3949ab);
  transition: width 0.3s ease;
}

.step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step.active {
  background: rgba(26, 35, 126, 0.1);
}

.step.completed .step-icon {
  background: #4caf50;
  color: white;
}

.step-icon {
  width: 40px;
  height: 40px;
  background: #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.step.active .step-icon {
  background: #1a237e;
  color: white;
}

/* 表单容器 */
.form-container {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 输入组件样式 */
.input-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-tip {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #666;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin-top: 0.5rem;
}

/* 方法选择器 */
.method-selector {
  display: flex;
  gap: 1rem;
}

.method-btn {
  flex: 1;
  padding: 0.8rem;
  border: 2px solid #eee;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-btn.active {
  border-color: #1a237e;
  background: #1a237e;
  color: white;
}

/* 格式选择器 */
.format-selector {
  display: flex;
  gap: 1rem;
}

.format-btn {
  flex: 1;
  padding: 0.8rem;
  border: 2px solid #eee;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.format-btn.active {
  border-color: #1a237e;
  background: #1a237e;
  color: white;
}

/* 预览区域 */
.preview-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
}

.preview-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.preview-alias {
  font-size: 0.9rem;
  color: #666;
}

.code-block {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
  font-family: monospace;
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.copy-btn:hover {
  opacity: 1;
}

/* 提交区域 */
.submit-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.submit-notice {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.submit-notice ul {
  margin: 1rem 0 0;
  padding-left: 1.5rem;
}

.submit-notice li {
  margin-bottom: 0.5rem;
  color: #666;
}

/* 按钮样式 */
.form-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.btn-secondary,
.btn-primary,
.btn-submit {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-secondary {
  background: #f8f9fa;
  color: #666;
}

.btn-primary {
  background: #1a237e;
  color: white;
}

.btn-submit {
  background: #4caf50;
  color: white;
}

.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Toast提示 */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem 2rem;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* 动画效果 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

@keyframes grid-move {
  from { transform: translateY(0); }
  to { transform: translateY(30px); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .interface-management {
    padding: 1rem;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .method-selector,
  .format-selector {
    flex-direction: column;
  }
  
  .form-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn-secondary,
  .btn-primary,
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .interface-management {
    background: #121212;
  }
  
  .form-container,
  .steps-nav {
    background: #1e1e1e;
    color: #fff;
  }
  
  .step-icon {
    background: #2d2d2d;
    color: #fff;
  }
  
  .input-tip {
    background: #2d2d2d;
    color: #fff;
  }
  
  .preview-card {
    background: #2d2d2d;
  }
  
  .submit-notice {
    background: #2d2d2d;
  }
  
  .btn-secondary {
    background: #2d2d2d;
    color: #fff;
  }
}

/* 添加抖动动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 错误状态样式 */
.error-shake {
  animation: shake 0.6s ease-in-out;
}

.input-error {
  border-color: #f56c6c !important;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.1) !important;
}

/* 错误提示信息 */
.error-message {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.error-message i {
  font-size: 14px;
}

</style>
